<style lang="less">
    @import 'firstMortgage.less';
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row class="operation">
                        <Button @click="setAdoptList('yes')" type="primary">已通过</Button>
                        <Button @click="setAdoptList('no')" type="primary">未通过</Button>
                    </Row>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                            <Form-item label="合作商名称" prop="dealerName">
                                <Input v-model="searchForm.dealerName" enter-button type="text" placeholder="请输入合作商名称" style="width:200px"/>
                            </Form-item>
                            <Form-item label="渠道类型" prop="channelType">
                                <Select v-model="searchForm.channelType" clearable placeholder="请选择渠道类型" style="width:200px">
                                    <Option v-for="item in this.channelTypeList" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                </Select>
                            </Form-item>
                            <!--                            <Form-item label="首单是否通过" prop="isFirstMortgage">-->
                            <!--                                <Select v-model="searchForm.isFirstMortgage" clearable placeholder="请选择首单是否通过" style="width:200px">-->
                            <!--                                    <Option value="yes">是</Option>-->
                            <!--                                    <Option value="no">否</Option>-->
                            <!--                                </Select>-->
                            <!--                            </Form-item>-->
                            <Form-item>
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                            <template slot-scope="{ row, index }" slot="channelFullName">
                                <bubble :data="row.dealerName" v-if="row.isShowBubble" style="    margin-top: -30px;margin-left: 80px;"></bubble>
                                <a type="primary" size="small" @click="showLoanDetail(row)">{{row.dealerName}}</a>
                            </template>
                            <template slot-scope="{ row, index }" slot="channelType">
                                <span>{{setChannelTypeTitle(row.channelType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="isFirstMortgage">
                                <span>{{setIsFirstMortgageTitle(row.isFirstMortgage)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>                    </Row>
                </Card>
            </Col>
        </Row>
        <!--显示城市首次抵押设置-->
        <Modal :title="modalTitle" v-model="isShowFirstMortgageCity" @on-cancel="backGo" :mask-closable='false' :width="1000">
            <div>
                <div style="text-align:center;" class="common_br">
                    <Alert show-icon closable>
                        <span>{{this.dealerName}}展业城市详情</span>
                        <span slot="close">不再提示</span>
                    </Alert>
                </div>
                <card>
                    <div>
                        <Row>
                            <Button @click="setAdopt('yes')" type="primary" icon="md-lock">已通过</Button>
                            <Button @click="setAdopt('no')" type="primary" icon="ios-unlock">未通过</Button>
                        </Row>
                        <Row>
                            <Form ref="firstMortgageCitySearchForm" :model="firstMortgageCitySearchForm" inline :label-width="200" >
                                <Form-item label="城市" prop="cityName">
                                    <Cascader v-model="addressParam" :data="addressData" style="width:200px;" change-on-select @on-change="onChangeLocation"></Cascader>
                                </Form-item>
                            </Form>
                        </Row>
                        <Row>
                            <Table :loading="loading" border :columns="cityColumns" :data="firstMortgageCityData" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                                <template slot-scope="{ row, index }" slot="cityName">
                                    <span>{{setCityTitle(row)}}</span>
                                </template>
                                <template slot-scope="{ row, index }" slot="isFirstMortgage">
                                    <span>{{setIsFirstMortgageTitle(row.isFirstMortgage)}}</span>
                                </template>
                            </Table>
                        </Row>
                        <Row type="flex" justify="end" class="page">
                            <Page :current="firstMortgageCitySearchForm.pageNumber" :total="CityTotal" :page-size="firstMortgageCitySearchForm.pageSize"
                                  @on-change="changeCityPage" @on-page-size-change="changeCityPageSize" :page-size-opts="[10,20,50]"
                                  size="small" show-total show-elevator show-sizer></Page>
                        </Row>
                    </div>
                </card>
            </div>
            <div slot="footer">
                <Button type="text" @click="backGo">返回</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { getByTypes } from '_p/basic/api/admin/datadic'
    import {dealerFirstMortgageList,
        dealerFirstMortgageCityList,
        getAddressTree,modifyIsFirstMortgage,
        modifyIsFirstMortgageList} from '@/projects/afs-core-business/api/afs-case/first-mortgage/firstMortgage'
    import bubble from '@/projects/afs-core-business/pages/case/approve/loan-approve-task/style/bubble';
    export default {
        name: 'firstMortgage',
        components: {
            bubble,
        },
        mounted() {
            this.init()
        },
        data() {
            return {
                loading: true,
                operationLoading: false,
                modalTitle:'展业城市详情',
                dealerName:'',
                dealerNo:'',
                OptionStatus:'',
                isShowFirstMortgageCity: false,
                dicKeys: [
                    'channelType'
                ],
                channelTypeList: [],
                addressParam: [],
                addressData: [],
                addressDataList: [],
                dataDic: {},
                selectCount: 0,
                selectList: [],
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10
                },
                firstMortgageCitySearchForm: {
                    pageNumber: 1,
                    pageSize:10,
                    dealerNo:'',
                },
                columns: [
                    {
                        type: 'selection',
                        minWidth: 60,
                        maxWidth: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '合作商名称',
                        key: 'channelFullName',
                        align: 'center',
                        minWidth: 180,
                        slot: 'channelFullName'
                    },
                    {
                        title: '首单是否通过',
                        key: 'isFirstMortgage',
                        align: 'center',
                        minWidth: 100,
                        slot: 'isFirstMortgage'
                    },
                    {
                        title: '渠道类型',
                        key: 'channelType',
                        align: 'center',
                        minWidth: 100,
                        slot: 'channelType'
                    },
                ],
                cityColumns: [
                    {
                        type: 'selection',
                        minWidth: 60,
                        maxWidth: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '城市',
                        key: 'cityName',
                        align: 'center',
                        minWidth: 100,
                        slot: 'cityName'
                    },
                    {
                        title: '首单是否通过',
                        key: 'isFirstMortgage',
                        align: 'center',
                        minWidth: 100,
                        slot: "isFirstMortgage"
                    },
                ],
                data: [],
                firstMortgageCityData: [],
                total: 0,
                CityTotal: 0,
            }
        },

        methods: {
            init() {
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                this.getMortgageList()
                this.getAddressTree()
                this.initDataDic()
            },
            getMortgageList(){
                this.loading=true;
                dealerFirstMortgageList(this.searchForm).then(res=>{
                    console.log(res.data)
                    this.data=res.data.records;
                    this.total=res.data.total;
                    this.loading=false;
                })
            },
            getMortgageCityList(){
                this.loading=true;
                this.firstMortgageCitySearchForm.dealerNo =this.dealerNo;
                dealerFirstMortgageCityList(this.firstMortgageCitySearchForm).then(res=>{
                    this.firstMortgageCityData=res.data.records;
                    this.CityTotal=res.data.total;
                    this.loading=false;
                })
            },
            getAddressTree(){
                getAddressTree().then(res=>{
                    this.addressData = res.data;
                    this.addressData.forEach(children=>{
                        this.addressDataList.push(children)
                        children.children.forEach(children=>{
                            this.addressDataList.push(children)
                            children.children.forEach(children=>{
                                this.addressDataList.push(children)
                            })
                        })
                    })
                })
            },
            handleSearch(){
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                this.getMortgageList()
            },
            handleReset(){
                this.$refs.searchForm.resetFields()
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                this.searchForm.dealerName =''
                this.searchForm.isFirstMortgage =''
                this.searchForm.channelType=''

                // 重新加载数据
                this.getMortgageList()
            },
            showLoanDetail(v){
                this.dealerName =v.dealerName;
                this.dealerNo =v.dealerNo;
                this.isShowFirstMortgageCity = true;
                this.getMortgageCityList();
            },
            backGo() {
                this.firstMortgageCitySearchForm = {
                    pageNumber: 1,
                        pageSize:10,
                        dealerNo:'',
                },
                this.addressParam = [],
                this.isShowFirstMortgageCity = false
            },
            initDataDic() {
                let self = this
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === '0000' && res.data) {
                        self.dataDic = res.data
                        this.channelTypeList.push(...res.data.channelType)
                    }
                })
            },
            hasSelected() {
                if (this.selectCount == 0) {
                    this.$Message.warning("需先勾选数据行!");
                    return false;
                } else {
                    return true;
                }
            },
            existsCurrentStatus(status) {
                let currentStatusNum = 0;
                this.selectList.forEach(record => {
                    if (record.isFirstMortgage == status) {
                        currentStatusNum++;
                    }
                });
                return currentStatusNum > 0;
            },
            setAdoptList(status){
                if (this.hasSelected()) {
                    if(this.existsCurrentStatus(status)){
                        this.$Message.warning("已选择数据存在"
                            +(status == "yes" ? "首单通过" : "首单未通过")
                            +"数据，请去除勾选后再操作");
                    }else {
                        this.OptionStatus =status;
                        this.submintAdoptList();
                    }
                }
            },
            setAdopt(status){
                if (this.hasSelected()) {
                    if(this.existsCurrentStatus(status)){
                        this.$Message.warning("已选择数据存在"
                            +(status == "yes" ? "首单通过" : "首单未通过")
                            +"数据，请去除勾选后再操作");
                    }else {
                        this.OptionStatus =status;
                        this.submintAdopt();
                    }
                }
            },
            submintAdoptList(){
                this.loading = true;
                let data = [];
                this.selectList.forEach(function (e) {
                    data += e.dealerNo + ",";
                });
                console.log(this.selectList)
                modifyIsFirstMortgageList(
                    data,
                    this.OptionStatus
                ).then(res => {
                    if (res.code == "0000") {
                        this.$Message.success("操作成功");
                        // this.getMortgageCityList();
                        this.getMortgageList();
                    }
                });
                this.loading = false;
            },
            submintAdopt(){
                this.loading = true;
                let data = [];
                this.selectList.forEach(function (e) {
                    data += e.id + ",";
                });
                modifyIsFirstMortgage(
                    data,
                    this.OptionStatus
                ).then(res => {
                    if (res.code == "0000") {
                        this.$Message.success("操作成功");
                        this.getMortgageCityList();
                        this.getMortgageList();
                    }
                });
                this.loading = false;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false)
            },
            changePage(v) {
                this.searchForm.pageNumber = v
                this.getMortgageList()
                this.clearSelectAll()
            },
            changePageSize(v) {
                this.searchForm.pageSize = v
                this.getMortgageList()
            },
            changeCityPage(v) {
                this.firstMortgageCitySearchForm.pageNumber = v
                this.getMortgageCityList()
                this.clearSelectAll()
            },
            changeCityPageSize(v) {
                this.firstMortgageCitySearchForm.pageSize = v
                this.getMortgageCityList()
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            setCityTitle(val){
                if(val.cityCode != undefined && val.cityCode != '' && val.cityCode != null){
                    let dic ={}
                    this.addressDataList.forEach(column=> {
                        if(column.value== val.cityCode){
                            dic = column;
                        }
                    });
                    return dic.title;
                } else {
                    let dic ={}
                    this.addressDataList.forEach(column=> {
                        if(column.value== val.provinceCode){
                            dic = column;
                        }
                    });
                    return dic.title;
                }
            },
            setChannelTypeTitle(val){
                let dic = {}
                this.channelTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            setIsFirstMortgageTitle(val){
                if(val=="yes"){
                    return "是"
                }else {
                    return "否"
                }
            },
            onChangeLocation(val){
                if(val.length == 0){
                    this.firstMortgageCitySearchForm.provinceCode=''
                    this.firstMortgageCitySearchForm.cityCode=''
                    this.getMortgageCityList();
                }
                if(val.length == 2){
                    this.firstMortgageCitySearchForm.provinceCode=val[1];
                    this.getMortgageCityList();
                }
                if(val.length == 3){
                    this.firstMortgageCitySearchForm.cityCode=val[2];
                    this.getMortgageCityList();
                }
            }
        }
    }
</script>

<style scoped>
</style>
